<template>
  <div>
    <gm-hot
      v-for="item in filterArr"
      :key="item.id"
      :title="item.name"
      :author="item.author"
      :text="item.text"
      :imgUrl="item.picUrl"
      @setData="pushData"
    ></gm-hot>

    <div class="p">
      <p>{{ nullVal }}</p>
    </div>

    <transition
      :duration="{ enter: 800, leave: 500 }"
      enter-active-class="animate__animated animate__fadeInUp"
      enter-to-class="animate__animated animate__fadeInUp"
      leave-active-class="animate__animated animate__fadeOutDown"
      leave-to-class="animate__animated animate__fadeOutDown"
    >
      <div v-if="flag" class="showDetails">
        <gm-details
          :infoObj="infoObj"
          @detailsClose="detailsClose"
        ></gm-details>
      </div>
    </transition>
  </div>
</template>

<script>
import gmHot from "@/components/gmHot.vue";
import gmDetails from "@/pages/details.vue";

export default {
  props: {
    searchVal: {
      type: String,
    },
  },
  name: "Search",
  components: {
    gmHot,
    gmDetails,
  },
  data() {
    return {
      newArr: [],
      youArr: [],
      allArr: [],
      filterArr: [],
      showi: false,
      infoObj: {},
      flag: false,
      nullVal: "",
    };
  },
  methods: {
    getData() {
      let url = "data/listen.json";
      let gms = axios.get(url);
      gms.then((res) => {
        let newArr = this.newArr;
        let youArr = this.youArr;

        newArr = res.data.resultNew;
        youArr = res.data.resultYou;

        let searchArr = newArr.concat(youArr);

        this.allArr = searchArr;
        let allArr = this.allArr;
        let searchName = this.searchVal;
        for (let i = 0; i < allArr.length; i++) {
          if (allArr[i].name.indexOf(searchName) != -1) {
            this.filterArr.push(allArr[i]);
          }
        }

        if (this.filterArr.length == 0) {
          this.nullVal = "书库里暂时没有你想听的书籍哦";
        }
      });
    },
    pushData(val) {
      this.infoObj = val.infoObj;
      this.flag = val.flag;
    },
    detailsClose(val) {
      this.flag = val;
    },
  },
  mounted() {
    this.getData();
    const mySwiper = new Swiper(".swiper-container", {
      slidesPerView: "auto",
      observer: true,
      spaceBetween: 20,
      freeMode: true,
    });
  },
};
</script>

<style lang="scss" scoped>
.showDetails {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fffaf0;
  z-index: 999999;
}
.p {
  height: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    font-size: 18px;
  }
}
</style>